<template>
  <div>
    <span>{{ foo }}{{ age }}</span>
    <slot name="header" :data="data"></slot>
    <slot name="footer" :data="data"></slot>
  </div>
</template>

<script setup lang="ts">
import {
  defineProps,
  withDefaults,
  defineEmits,
  defineEmit,
  useSlots,
  useAttrs,
} from "vue";
defineProps({
  foo: {
    type: String,
    default: "text1",
  },
});
// interface Props {
//   msg?: string;
// }
// withDefaults(defineProps<Props>(), {
//   msg: "as",
// });
defineEmit(["change", "delete"]);
defineEmits<{
  (e: "change", val: Event): void;
  (e: "update", dom: HTMLElement): void;
}>();
const data = {
  name: "liu",
  age: "as",
};
const red = "red";
const slots = useSlots();
const { age } = useAttrs();
console.log(slots, age);
</script>

<style>
span {
  color: v-bind(red);
}
</style>
